import React, { Component } from 'react';
import axios from 'axios'

// 封装验证码图片的网络请求
class Captcha extends Component {

	// 初始化状态
	state = {
		imgUrl : ''
	}

	render() {
		return (
			<div>
				<img src={this.state.imgUrl} alt="captcha" height={this.props.height} width={this.props.width} onClick={this.clickCode}/>
			</div>
		);
	}

	// 发起网络请求
	componentDidMount() {
		this.getCode('math')
	}

	// 更新验证码图片
	clickCode = () => {
		this.getCode('math')
	}

	// 获取验证码
	getCode = (type) => {
		axios.get('https://reactapi.iynn.cn/captcha/api/'+type).then(data => {
			this.setState(() => {
				return {
					imgUrl:data.img
				}
			})

			// 由于在登录验证时需要使用key，所以需要把key通过子到父传递过去
			this.props.setKey(data.key)
		})
	}


}

export default Captcha;